<template>
	<view class="container">
		<!-- 佣金统计 -->
		<view class="commission-stats">
			<view class="stats-item">
				<text class="value">{{stats.total}}</text>
				<text class="label">累计佣金</text>
			</view>
			<view class="stats-item">
				<text class="value">{{stats.available}}</text>
				<text class="label">可提现佣金</text>
			</view>
			<view class="stats-item">
				<text class="value">{{stats.withdrawn}}</text>
				<text class="label">已提现佣金</text>
			</view>
		</view>
		
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view 
				class="filter-item" 
				v-for="(item, index) in filterOptions" 
				:key="index"
				:class="{ active: currentFilter === item.value }"
				@tap="switchFilter(item.value)"
			>
				<text>{{item.label}}</text>
			</view>
		</view>
		
		<!-- 佣金明细列表 -->
		<scroll-view 
			scroll-y 
			class="commission-list"
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view 
				class="commission-item" 
				v-for="(item, index) in commissionList" 
				:key="index"
			>
				<view class="item-header">
					<text class="order-no">订单号：{{item.orderNo}}</text>
					<text class="status" :class="item.status">{{item.statusText}}</text>
				</view>
				<view class="item-content">
					<view class="product-info">
						<image :src="item.productImage" mode="aspectFill" class="product-img"></image>
						<view class="product-detail">
							<text class="product-name">{{item.productName}}</text>
							<text class="product-spec">{{item.productSpec}}</text>
						</view>
					</view>
					<view class="commission-info">
						<text class="amount">¥{{item.amount}}</text>
						<text class="rate">{{item.rate}}%</text>
					</view>
				</view>
				<view class="item-footer">
					<text class="time">{{item.createTime}}</text>
					<text class="commission">佣金：¥{{item.commission}}</text>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="loading-more" v-if="hasMore">
				<text>加载中...</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多了</text>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="commissionList.length === 0">
				<image src="/static/images/empty.png" mode="aspectFit" class="empty-img"></image>
				<text class="empty-text">暂无佣金记录</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

// 佣金统计
const stats = ref({
	total: '1234.56',
	available: '888.88',
	withdrawn: '345.68'
})

// 筛选选项
const filterOptions = [
	{ label: '全部', value: 'all' },
	{ label: '待结算', value: 'pending' },
	{ label: '已结算', value: 'settled' },
	{ label: '已提现', value: 'withdrawn' }
]

// 当前筛选条件
const currentFilter = ref('all')

// 是否正在刷新
const isRefreshing = ref(false)

// 是否还有更多数据
const hasMore = ref(true)

// 佣金明细列表
const commissionList = ref([
	{
		orderNo: 'DD202402010001',
		status: 'pending',
		statusText: '待结算',
		productImage: 'https://img.alicdn.com/imgextra/i4/O1CN01XCiY1B1nx2Xh2Z9tP_!!6000000005155-0-tps-1316-736.jpg',
		productName: '商品名称1',
		productSpec: '规格：默认',
		amount: '199.00',
		rate: '10',
		createTime: '2024-02-01 12:00:00',
		commission: '19.90'
	},
	{
		orderNo: 'DD202402010002',
		status: 'settled',
		statusText: '已结算',
		productImage: 'https://img.alicdn.com/imgextra/i2/O1CN01F0MA5j1zXb0XcYV1F_!!6000000006733-0-tps-1316-736.jpg',
		productName: '商品名称2',
		productSpec: '规格：默认',
		amount: '299.00',
		rate: '10',
		createTime: '2024-02-01 13:00:00',
		commission: '29.90'
	},
	{
		orderNo: 'DD202402010003',
		status: 'withdrawn',
		statusText: '已提现',
		productImage: 'https://img.alicdn.com/imgextra/i3/O1CN01Z5paLt1goYDdHEzSU_!!6000000004150-0-tps-1316-736.jpg',
		productName: '商品名称3',
		productSpec: '规格：默认',
		amount: '399.00',
		rate: '10',
		createTime: '2024-02-01 14:00:00',
		commission: '39.90'
	}
])

// 切换筛选条件
const switchFilter = (value) => {
	currentFilter.value = value
	// 重置列表并重新加载
	commissionList.value = []
	hasMore.value = true
	loadCommissionList()
}

// 加载佣金明细列表
const loadCommissionList = () => {
	// 这里可以添加根据筛选条件加载佣金明细列表的接口调用
}

// 加载更多
const loadMore = () => {
	if (!hasMore.value) return
	
	// 这里可以添加加载更多佣金明细的接口调用
	setTimeout(() => {
		hasMore.value = false
	}, 1000)
}

// 下拉刷新
const onRefresh = () => {
	isRefreshing.value = true
	// 重置列表并重新加载
	commissionList.value = []
	hasMore.value = true
	
	setTimeout(() => {
		isRefreshing.value = false
		loadCommissionList()
	}, 1000)
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #F5F5F5;
}

/* 佣金统计样式 */
.commission-stats {
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
}

.stats-item {
	flex: 1;
	text-align: center;
}

.stats-item .value {
	font-size: 36rpx;
	color: #D02B29;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.stats-item .label {
	font-size: 24rpx;
	color: #999;
}

/* 筛选栏样式 */
.filter-bar {
	display: flex;
	background-color: #FFFFFF;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
}

.filter-item {
	flex: 1;
	text-align: center;
	padding: 10rpx 0;
	font-size: 28rpx;
	color: #666;
	position: relative;
}

.filter-item.active {
	color: #D02B29;
	font-weight: bold;
}

.filter-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #D02B29;
	border-radius: 2rpx;
}

/* 佣金明细列表样式 */
.commission-list {
	height: calc(100vh - 300rpx);
}

.commission-item {
	background-color: #FFFFFF;
	margin-bottom: 20rpx;
	padding: 20rpx;
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.order-no {
	font-size: 24rpx;
	color: #666;
}

.status {
	font-size: 24rpx;
	padding: 4rpx 16rpx;
	border-radius: 20rpx;
}

.status.pending {
	color: #FFA500;
	background-color: #FFF5E6;
}

.status.settled {
	color: #52C41A;
	background-color: #F6FFED;
}

.status.withdrawn {
	color: #999;
	background-color: #F5F5F5;
}

.item-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.product-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.product-img {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.product-detail {
	flex: 1;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.product-spec {
	font-size: 24rpx;
	color: #999;
}

.commission-info {
	text-align: right;
}

.amount {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.rate {
	font-size: 24rpx;
	color: #D02B29;
}

.item-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20rpx;
	border-top: 1rpx solid #EEEEEE;
}

.time {
	font-size: 24rpx;
	color: #999;
}

.commission {
	font-size: 28rpx;
	color: #D02B29;
	font-weight: bold;
}

/* 加载更多样式 */
.loading-more, .no-more {
	text-align: center;
	padding: 20rpx 0;
	font-size: 24rpx;
	color: #999;
}

/* 空状态样式 */
.empty-state {
	padding: 100rpx 0;
	text-align: center;
}

.empty-img {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style> 